<template>
  <el-form label-width="80">

    <el-form-item label="手机号码" :required="true">

      <el-input v-model="phoneNumb" type="text" placeholder="请输入用户名" @on-change="listenName" />
      <p v-show="flagname" style="margin-bottom: -20px;">
        <span style="color: red;">请输入正确的手机号码</span>
      </p>
    </el-form-item>
    <el-form-item label="验证码" :required="true">

      <el-row>
        <el-col :span="8">
          <el-input v-model="auth_code" type="text" placeholder="请获取验证码" @on-change="listenCode" />
        </el-col>
        <el-col :span="6" style="margin-left: 10px;">
          <el-button type="info" @click="getCode(phoneNumb)">
            <span v-if="flag==true">获取验证码</span>
            <span v-else>{{ time }}s</span>
          </el-button>
        </el-col>
      </el-row>
      <p v-show="flagecode" style="margin-bottom: -20px;">
        <span style="color: red; ">请输入正确的验证码</span>
      </p>
    </el-form-item>
    <el-form-item label="密码" :required="true">
      <el-input v-model="passwd" type="password" placeholder="请输入密码" @on-change="listenPasswd" />
      <p v-show="flagpasswd" style="margin-bottom: -20px;">
        <span style="color: red; ">密码必须包含字母和数字，且在6~18位之间</span>
      </p>
    </el-form-item>
    <el-form-item label="确认密码" :required="true">
      <el-input v-model="passwordcheck" type="password" placeholder="请再次输入密码" @on-change="listenPasswordcheck" />
      <p v-show="flagpasswdcheck1" style="margin-bottom: -20px;">
        <span style="color: red; ">请再次输入密码</span>
      </p>
      <p v-show="flagpasswdcheck2" style="margin-bottom: -20px;">
        <span style="color: red; ">两次密码不一致</span>
      </p>
    </el-form-item>

    <el-form-item style="text-align: center;margin-left: -80px;">
      <el-button style="width:120px ;" type="info" @click="handleSubmit(phoneNumb,auth_code,passwd,passwordcheck)">注册</el-button>
      <!-- <i-button type="warning" @click="handleReset()" style="margin-left: 8px">重置</i-button> -->
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      phoneNumb: '',
      auth_code: '',
      passwd: '',
      passwordcheck: '',
      flagname: '',
      flagecode: '',
      flagpasswd: '',
      flagpasswdcheck1: '',
      flagpasswdcheck2: '',
      flag: true,
      time: ''
    }
  },
  methods: {
    // 监听输入状态
    listenName(event) {
      this.flagname = false
    },
    listenCode(event) {
      this.flagecode = false
    },
    listenPasswd(event) {
      this.flagpasswd = false
    },
    listenPasswordcheck(event) {
      this.flagpasswdcheck1 = false
      this.flagpasswdcheck2 = false
    },

    // 获取手机验证码
    async getCode(phoneNumb) {
      this.checkUser(phoneNumb)
      // 判断手机号是否正确，正确则获取验证码
      if (this.flagname == false) {
        // 调用获取验证码方法
        const res = await this.$api.getCode({
          phone: phoneNumb
        })
        this.$Modal.success({
          title: '获取验证码',
          content: res.data.message
        })

        if (res.data.level == 'success') {
          this.flag = false
          this.time = 60
          this.timeInterval = setInterval(() => {
            this.time--
            if (this.time < 0) {
              this.flag = true
              this.time = ''
              clearInterval(this.timeInterval)
            }
          }, 1000)
        }
      }
    },

    // 点击注册
    async handleSubmit(phoneNumb, auth_code, passwd, passwordcheck) {
      // 调用正则表达式验证方法
      this.checkMail(auth_code)
      this.checkPwd(passwd)
      this.matchPsd(passwd, passwordcheck)

      // 判断所有红色警示句子都为false时证明验证成功，前往注册
      if (!this.flagname && !this.flagecode && !this.flagpasswd && !this.flagpasswdcheck1 && !this.flagpasswdcheck2) {
        console.log('前往注册=' + auth_code)
        // 注册传参
        const params = {
          phone: phoneNumb,
          password: passwordcheck,
          verify_code: auth_code
        }
        const res = await this.$api.registerUser(
          params
        )
        console.log(res)
        // 判断，验证码回调为error弹窗提示，否则注册成功转到登陆页面
        if (res.data.level == 'error') {
          this.$Modal.warning({
            title: '消息',
            content: res.data.message
          })
          this.auth_code = ''
          this.flagecode = true
        } else {
          this.$Modal.success({
            title: '消息',
            content: res.data.message
          })
          // 注册成功自动跳转到登陆页面，子向父传值
          this.$emit('sendLogin', true)
        }
      } else {
        console.log('验证失败')
      }
    },
    // 手机号码验证 11位数字
    checkUser(phoneNumb) {
      var user = /^1[0-9]{10}$/
      if (user.test(phoneNumb)) {
        this.flagname = false
      } else {
        this.flagname = true
      }
    },
    // 邮箱验证 正则表达
    checkMail(mail) {
      var reg2 = /(?!0000)[0-9]{4}/
      if (!reg2.test(mail)) {
        this.flagecode = true
      } else {
        this.flagecode = false
      }
    },
    // 密码必须包含字母和数字，且在6~18位之间 正则表达式
    checkPwd(str) {
      var pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
      if (pwd.test(str)) {
        this.flagpasswd = false
      } else {
        this.flagpasswd = true
      }
    },
    // 两次密码对比
    matchPsd(pwd1, pwd2) {
      if (pwd2 === '') {
        this.flagpasswdcheck1 = true
        this.flagpasswdcheck2 = false
      } else if (pwd1 !== pwd2) {
        this.flagpasswdcheck1 = false
        this.flagpasswdcheck2 = true
      } else {
        this.flagpasswdcheck1 = false
        this.flagpasswdcheck2 = false
      }
    }
    // 重置注册
    /* handleReset() {
        var msg = confirm("确定重置吗")
        if(msg==true){
          this.phoneNumb = ''
          this.auth_code = ''
          this.passwd = ''
          this.passwordcheck = ''
        }
      } */
  }
}
</script>
